<template>
  <div class="e-search-box">
    <div
      :class="{
        'e-search-form': true,
        big: !refreshShow || !moreShow,
        bigest: !refreshShow && !moreShow && !openable
      }"
      :style="{ height: formHeight + 'px' }"
    >
      <el-form ref="searchForm" :model="formData" @submit.prevent>
        <el-row :gutter="0">
          <el-col v-for="(item, index) in formOptions" :key="index" :span="item.span || 24">
            <el-form-item
              :label="item.label"
              :label-width="item.label === '' ? '0px' : formLabelWidth"
              :prop="item.prop ? item.prop : item.key"
              class="e-search-from-item"
            >
              <template v-if="item.type === 'input'">
                <el-input v-model="formData[item.key]" v-bind="item.props" />
              </template>
              <template v-if="item.type === 'number'">
                <el-input-number
                  v-model="formData[item.key]"
                  v-bind="item.props"
                  style="width: 100%"
                />
              </template>
              <template v-if="item.type === 'select'">
                <el-select
                  v-model="formData[item.key]"
                  v-bind="item.props"
                  clearable
                  style="width: 100%"
                >
                  <el-option
                    v-for="(sitem, sindex) in item.options"
                    :key="sindex"
                    :label="sitem.label"
                    :value="sitem.value"
                  />
                </el-select>
              </template>
              <template v-if="item.type === 'time'">
                <el-time-select
                  v-model="formData[item.key]"
                  v-bind="item.props"
                  style="width: 100%"
                />
              </template>
              <template v-if="item.type === 'date'">
                <el-date-picker
                  v-model="formData[item.key]"
                  v-bind="item.props"
                  style="width: 100%"
                />
              </template>
              <template v-if="item.type === 'radio'">
                <el-radio-group v-model="formData[item.key]" v-bind="item.props">
                  <el-radio
                    v-for="(sitem, sindex) in item.options"
                    :key="sindex"
                    :label="sitem.label"
                    >{{ sitem.text }}</el-radio
                  >
                </el-radio-group>
              </template>
              <template v-if="item.type === 'checkbox'">
                <el-checkbox-group v-model="formData[item.key]" v-bind="item.props">
                  <el-checkbox
                    v-for="(sitem, sindex) in item.options"
                    :key="sindex"
                    :label="sitem.label"
                    v-bind="sitem.props"
                    >{{ sitem.text }}</el-checkbox
                  >
                </el-checkbox-group>
              </template>
              <template v-if="item.type === 'cascader'">
                <el-cascader v-model="formData[item.key]" v-bind="item.props" style="width: 100%" />
              </template>
              <!-- <template v-if="item.type === 'customCascader'">
                 <custom-cascader v-if="!item.readonly" :cascader-options="item.props" :currentSelect="item.currentSelect" @on-load-data="item.loadOptions"></custom-cascader>
                 <span v-else>{{ formData[item.key] }}</span>
              </template> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div
      :class="{
        'e-search-btn': true,
        small: !refreshShow || !moreShow,
        smallest: !refreshShow && !moreShow && !openable
      }"
    >
      <el-button
        type="primary"
        v-show="openBtn"
        @click="handleOpen"
        v-if="openable"
        size="small"
        link
      >
        {{ open ? '收起' : '展开' }}
        <!-- <i :class="`el-icon-${open ? 'arrow-up' : 'arrow-down'} el-icon--right`"></i> -->
      </el-button>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button v-if="refreshShow" @click="handleRefresh">重置</el-button>
      <el-button type="danger" v-if="moreShow" @click="handleSearchMore">高级搜索</el-button>
    </div>
  </div>
</template>

<script>
// import customCascader from '@/components/custom-cascader';

export default {
  name: 'ESearch',
  components: {
    // customCascader
  },
  props: {
    // 查询表单配置
    formOptions: {
      type: Array,
      default() {
        return []
      }
    },
    // 查询表单数据
    formDataCurrent: {
      type: Object,
      default() {
        return {}
      }
    },
    // 查询表单label宽度
    formLabelWidth: {
      type: String,
      default: '120px'
    },
    // 是否显示重置按钮
    refreshShow: {
      type: Boolean,
      default: true
    },
    // 是否显示高级搜索按钮
    moreShow: {
      type: Boolean,
      default: false
    },
    // 是否显示展开手气按钮
    openable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {},
      open: false,
      list: []
    }
  },
  computed: {
    // 根据表单配置计算表单高度
    formHeight() {
      return this.open || !this.openable ? 40 * this.searchFormLine : 40
    },
    // 根据表单配置计算表单高度
    btnsWidth() {
      return this.refreshShow ? 260 : 150
    },
    // 根据表单配置控制是否显示展开按钮
    openBtn() {
      return this.searchFormLine > 1 && this.openable
    },
    // 根据表单配置计算表单行数
    searchFormLine() {
      let line = 0
      this.formOptions.map((item) => {
        line = line + (item.span || 24)
      })
      return line % 24 > 0 ? parseInt(line / 24 + 1) : line / 24
    }
  },
  watch: {
    formOptions(value) {
      this.handleFormDateCreate(value)
    },
    formDataCurrent: {
      handler(value) {
        this.formData = { ...value }
      },
      immediate: true
    }
  },
  created() {
    this.handleFormDateCreate(this.formOptions)
  },
  mounted() {},
  methods: {
    /**
     * @functionName handleFormDateCreate
     * @param {Array} list 查询表单配置数组
     * @description 初始化查询表单的数据
     */
    handleFormDateCreate(list) {
      list.map((item) => {
        let data
        switch (item.type) {
          case 'checkbox':
            data = []
            break
          case 'cascader':
            data = []
            break
          default:
            data = ''
            break
        }
        if (!this.formData[item.key]) {
          this.formData[item.key] = data
        }
      })
      this.$emit('change-height', this.formHeight)
    },
    /**
     * @functionName handleOpen
     * @description 展开/收起按钮
     */
    handleOpen() {
      this.open = !this.open
      this.$emit('change-height', this.formHeight)
    },
    /**
     * @functionName handleSearch
     * @description 点击查询按钮
     */
    handleSearch() {
      this.$emit('on-search', this.formData)
    },
    /**
     * @functionName handleRefresh
     * @description 重置查询表单
     */
    handleRefresh() {
      this.$refs.searchForm.resetFields()
      this.$emit('on-refresh', this.formData)
    },
    /**
     * @functionName handleSearchMore
     * @description 点击高级查询按钮
     */
    handleSearchMore() {
      this.$emit('on-search-more')
    }
  }
}
</script>
<style lang="scss" scoped>
.e-search-box {
  padding-top: 10px;
  margin-bottom: 10px;
  display: flex;
  .e-search-form {
    flex: 1;
    // float: left;
    // width: calc(100% - 250px);
    padding-right: 10px;
    overflow: hidden;
    // &.big {
    //   width: calc(100% - 200px);
    // }
    // &.bigest {
    //   width: calc(100% - 100px);
    // }
    .el-form-item--medium :deep(el-form-item__label) {
      line-height: 34px;
    }
    .e-search-from-item {
      margin-bottom: 8px !important;
    }
  }
  .e-search-btn {
    // margin-top: 6px;
    // float: right;
    // width: 200px;
    text-align: right;
    // &.small {
    //   width: 215px;
    // }
    // &.smallest {
    //   width: 100px;
    // }
  }
  .el-select .el-select--medium {
    width: 90% !important;
  }
  &::after {
    content: '';
    display: block;
    clear: both;
  }
  // .el-select {
  //   height: 45px !important;
  // }
  .el-col {
    height: 40px;
  }
  :deep(.el-form-item__label) {
    overflow: hidden;
  }
}
</style>
